import React, { useEffect, useState, Fragment } from 'react'
import { useLocation } from 'react-router-dom'

import { Button, Result } from 'antd';

import styles from './index.module.css'

//api
import { getWxJsConfig } from '../../utils/axiosRequest/api'
//微信js配置
import { generateParams } from "../../utils/wx/wxConfig"


function ReportResults() {
    //微信JSSDK
    const wx = React.useRef();
    // 如果没有state，将state设为一个空对象
    const location = useLocation()
    const state = location.state || {}
    //0是1否，默认失败
    const [resultTag, setResultTag] = useState('1');
    const [caseNumber, setCaseNumber] = useState('');

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {
        }
    }, []);

    function initData() {
        //初始化微信js
        wx.current = window.wx;
        //设置页面标题
        //document.title = '上报结果'
        //获取上级页面的传参
        if (state != null && state.params != null) {
            setResultTag(state.params.resultTag)
            setCaseNumber(state.params.caseNumber)
        }
        //注册微信js
        initWxJsConfig()
    }
    function initWxJsConfig() {
        //处理url->当前网页的URL，不包含#及其后面部分
        const url = window.location.href.split('#')[0]
        const params = new Map()
        params.set('hrefUrl', url)
        getWxJsConfig(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    wxConfig(data.data)
                } else {
                    //处理失败
                    //messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                //messageApi.open({ type: 'error', content: error.message });
            });
    }

    //注册微信公众号js
    function wxConfig(data) {
        //注册配置
        wx.current.config(generateParams(data));

        wx.current.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
            //所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            //隐藏所有非基础按钮接口
            wx.current.hideAllNonBaseMenuItem()
        });
    }


    return (
        <Fragment >
            {resultTag === '0' ?
                <Result
                    status="success"
                    title="案件上报成功"
                    extra={
                        <div className={styles.root}>
                            <span style={{ color: '#8c8c8c', fontSize: '17px' }}>您已经成功上报案件，请耐心等待处理...</span>
                            <span style={{ color: '#8c8c8c', marginTop: '30px' }}>上报时间：2025年2月17号 15:20:91</span>
                            <span style={{ color: '#8c8c8c', marginTop: '10px', }}>案件编号：{caseNumber}</span>
                        </div>
                    }
                />
                :
                <Result
                    status="error"
                    title="案件上报失败！"
                    subTitle="失败原因：XXXXXXXXXXXXXXXXXXXXXXXX"
                />}
        </Fragment>
    )
}

export default ReportResults;